<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <script src="./vue.js"></script>
  <body>
    <!-- 模板 -->
    <div id="example">
      <!-- 在模板插值中，我们可以使用单个JavaScript表达式 -->
      <div>{{ message.split('').reverse().join('') }}</div>

      <!-- 
	模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。
	在模板中放入太多的逻辑会让模板过重且难以维护,所有我们应该使
	用计算属性
	 -->

      <div>{{ reverseMessage1 }}</div>
      <!-- conputed 调用的是Message的getter函数 -->

      <div>{{ reversedMessage2() }}</div>
      <!-- methods 调用的是Message的reverse函数 -->
    </div>

    <script>
      //数据

      let data = {
        message: 'vue学习计划'
      }

      //vm实例
      var vm = new Vue({
        el: '#example',

        data: data,

        computed: {
          reverseMessage1: function() {
            return this.message
              .split('')
              .reverse()
              .join('')
          }
        },

        methods: {
          reversedMessage2: function() {
            return this.message
              .split('')
              .reverse()
              .join('')
          }
        }
      })
    </script>
  </body>
</html>
